<template id="nav">
    <style>
        ul.nav{
            position: fixed;
            bottom: 0px;
            background-color: #fff;
            width: 100%;
            display: flex;
            justify-content:space-around;
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            border-top: #ddd solid 1px;
        }
        ul.nav li{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 10px;
            width: 50px;
            height: 50px;
            line-height: 15px;
        }
        ul.nav .icon{
            width: 22px;
            height: 22px;
        }
        ul.nav li:nth-child(2) .icon{
            padding: 2px;
            box-sizing: border-box;
        }
        ul.nav li.selected{
            color: green;
        }
        ul.nav li.selected svg{
            fill: green;
        }
    </style>
    <ul class="nav">
        <li class="home">
            <sapn class="icon">
            <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" class="style-scope iron-icon"></path></g></svg>
            </sapn>
            首页</li>
        <li class="new_program"><span class="icon"><svg viewBox="0 0 64 64" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M40.4 20c8-1.2 15.6-4.4 8.8-14.4-2.8-4-5.6-5.6-8-5.6-4 0-6.8 4.4-9.2 8.8-2.4-4.4-5.2-8.8-9.2-8.8-2.4 0-5.2 1.6-8 5.6-7.2 10 0.8 13.2 8.8 14.4h-23.6v12h64v-12h-23.6zM41.2 4c0.4 0 2 0.4 4.8 4 2 2.8 2.4 4.4 2 5.2-0.8 1.2-5.2 2.8-13.2 3.2 0-0.8-0.4-1.6-0.8-2.4 2.4-5.6 5.2-10 7.2-10zM16 13.2c-0.4-0.8 0-2.4 2-5.2 2.8-3.6 4.4-4 4.8-4 2 0 4.8 4.4 7.2 10-0.4 0.8-0.8 1.6-0.8 2.4-8-0.4-12.4-2-13.2-3.2zM28 28v-8h8v8h-8z" class="style-scope iron-icon"></path><path d="M36 60h-8v-24h-24v28h56v-28h-24z" class="style-scope iron-icon"></path></g></svg></span>发起抽奖</li>
        <li class="my"><span class="icon"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" class="style-scope iron-icon"></path></g></svg></span>我的</li>
    </ul>
</template>
<script>
    function(){
        customElements.define('inc-nav',
        class extends HTMLElement {
            constructor() {
                super();
                let templateContent = document.currentScript.ownerDocument.querySelector('#nav').content;
                let doc = templateContent.cloneNode(true);
                let _ = function(el) {
                    return $(doc.querySelector(el));
                }
                _(".home").click(function() {
                    window.location.href = "index.html";
                });
                _(".new_program").click(function() {
                    window.location.href = "create_program.html";
                });
                _(".my").click(function() {
                    window.location.href = "my.html";
                });
                _("." + this.getAttribute("selected")).addClass("selected");
                this.attachShadow({
                    mode: 'open'
                }).appendChild(doc);

            }
        }
    );
    }
</script>


<template id="program-list">
    <style>
        ul.list{
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            margin: 0px 10px;
        }
        ul.list li{
            display: flex;
            border:#ccc solid 1px;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #fff;
            border-radius: 3px;
            flex-direction: column;
            
        }
        ul.list li .product_pic{
            width: 100%;
            display: block;
        }
        ul.list li .sponsor strong{
            color:cadetblue;
        }
        ul.list li .title{
            font-size: 16px;
            line-height: 30px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
        }
        ul.list li .title .right{
            font-size: 12px;
            color: green;
            background: url() left center no-repeat;
            padding-left: 18px;
            font-weight: normal;
        }
        ul.list li .gift_info{
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: #666;
        }
    </style>
    <ul class="list">
        <li>
            <img class="product_pic" src="https://img.alicdn.com/imgextra/i3/1886487777/O1CN0127JufVir7DmPYpu_!!1886487777-0-daren.jpg"/>
            <div class="sponsor"><strong>正泰集团股份有限公司</strong> 赞助</div>
            <div class="title">
                <span class="left">年终豪礼大放送</span>
                <span class="right">已参与</span>
            </div>
            <div class="gift_info">
                <span>礼单价值：￥1024.00</span>
                <span>礼品数量：11件</span>
                <span>开奖时间：两天后</span>
            </div>
        </li>
        <li>
            <img class="product_pic" src="https://img.alicdn.com/imgextra/i3/1886487777/O1CN0127JufVir7DmPYpu_!!1886487777-0-daren.jpg"/>
            <div class="sponsor"><strong>正泰集团股份有限公司</strong> 赞助</div>
            <div class="title">
                <span class="left">年终豪礼大放送</span>
                <span class="right">已参与</span>
            </div>
            <div class="gift_info">
                <span>礼单价值：￥1024.00</span>
                <span>礼品数量：11件</span>
                <span>开奖时间：两天后</span>
            </div>
        </li>
        <li>
            <img class="product_pic" src="https://img.alicdn.com/imgextra/i3/1886487777/O1CN0127JufVir7DmPYpu_!!1886487777-0-daren.jpg"/>
            <div class="sponsor"><strong>正泰集团股份有限公司</strong> 赞助</div>
            <div class="title">
                <span class="left">年终豪礼大放送</span>
                <span class="right">已参与</span>
            </div>
            <div class="gift_info">
                <span>礼单价值：￥1024.00</span>
                <span>礼品数量：11件</span>
                <span>开奖时间：两天后</span>
            </div>
        </li>
    </ul>
</template>
<script>
    function(){
        customElements.define('inc-program-list',
        class extends HTMLElement {
            constructor() {
                super();
                let templateContent = document.currentScript.ownerDocument.querySelector('#program-list').content;
                let doc = templateContent.cloneNode(true);
                let _ = function(el) {
                    return $(doc.querySelector(el));
                }
                _(".list li").click(function(){
                    window.location.href = "detail.html";
                });
                this.attachShadow({
                    mode: 'open'
                }).appendChild(doc);

            }
        }
    );
    }
</script>